<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="icon" type="image/png" href="./img/icon.png" /-->
<title>CDBUS Tools - Ctrl</title>

<link rel="stylesheet" href="./libs/bulma-0.9.1.min.css">
<link rel="stylesheet" href="./libs/bulma-tooltip-v1.2.0.min.css">
<link rel="stylesheet" href="./libs/uPlot-1.6.5.min.css">

<style>

.columns.is-gapless>.is-1.reg_btn_rw {
    width: 30px;
    margin: 1px 1px 1px 1px;
    border-radius: 6px 6px 6px 6px;
    border-width: 0.1px;
    border-style: dashed;
    /*background: #73AD81;*/
    
    /* txt center: */
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}
.reg_btn_rw:hover {
    /*background-color: yellow;*/
    cursor: pointer;
}

.columns.is-gapless:not(:last-child) {
    margin-bottom: 0rem;
}

</style>

</head>
<body>

<section class="section">

    <div class="container">
        <h2 class="title is-size-4">Regs <span class="is-size-6" id="tgt_name"></span></h2>
        
        <div class="columns">
            <div class="column">
                <button class="button is-small" id="dev_read_info">Read Info</button>
                <button class="button is-small" id="dev_read_all">Read All</button>
                <button class="button is-small" id="dev_write_all">Write All</button>
                |
                <label class="checkbox"><input type="checkbox" id="less_reg"> Less</label>,
                <label class="checkbox"><input type="checkbox" id="keep_read"> Read per</label>
                <input type="text" size="5" placeholder="1000" id="read_period" value="1000"> ms
                |
                <button class="button is-small" id="button_edit">Button Edit</button>
                <span id="button_subs" style="display: none;">
                <button class="button is-small" id="group_on">Group</button>
                <button class="button is-small" id="group_off">Ungroup</button>
                <button class="button is-small" id="enable_on">Enable</button>
                <button class="button is-small" id="enable_off">Disable</button>
                <button class="button is-small" id="button_all">Select All</button>
                <button class="button is-small" id="button_def">Load Default</button>
                </span>
            </div>
        </div>
        <div class="container">
            Device Info: <span id="dev_info">--</span>
        </div>
        <br>
        
        <div class="content">
            <div class="columns">
              <div class="column" id="reg_list0"></div>
              <div class="column" id="reg_list1"></div>
            </div>
        </div>
        
        <div class="container">
            <h2 class="title is-size-4">Logs</h2>
            <label class="checkbox"><input type="checkbox" id="scroll_end" checked> Scroll end</label>
            | Len: <input type="text" size="8" placeholder="1000" id="dbg_len" value="1000">
            <button class="button is-small" id="log_clear">Clear</button>
            <button class="button is-small" id="log_blank">Add blank</button> <br><br>
            <div style="font-family: monospace; font-size: 12px; overflow: scroll; height: 260px; color: white; background: black; resize: both;" id="dev_log"></div>
        </div>
        <br>
        
        <div class="container" id="plot_list">
        </div>
        <div class="container" id="pic_show">
        </div>
        
        <div class="container">
            <h2 class="title is-size-4">IAP</h2>
            <input type="text" size="85" placeholder="Full path of intel hex file on system" id="iap_path">
            <select id="iap_action" value="bl_full">
                <option value="bl_full">Reboot -> BL -> Flash -> Reboot</option>
                <option value="bl_flash">Reboot -> BL -> Flash</option>
                <option value="bl">Reboot -> BL (Enter BootLoader)</option>
                <option value="flash">Flash Only</option>
            </select>
            <select id="iap_check" value="none">
                <option value="none">No Check</option>
                <option value="read">Read Back Check</option>
                <option value="crc">Read CRC Check</option>
            </select>
            <button class="button is-small" id="iap_start">Start</button>
            <button class="button is-small" id="iap_stop" disabled>Stop</button> <br>
            
            Progress: <span id="iap_epoch"></span> <span id="iap_progress">--</span>
        </div>
        <br>
        
        <div class="container">
            <h2 class="title is-size-4">Export & Import</h2>
            <button class="button is-small" id="export_btn">Export Data</button>
            <button class="button is-small" id="import_btn">Import Data</button>
            <input id="input_file" type="file" style="display:none;">
        </div>
        
    </div>

</section>

</body>
<script src="./libs/msgpack-ygoe-9045d01.min.js" defer></script>
<script src="./libs/uPlot-1.6.5.iife.min.js" defer></script>
<script src="./libs/ansi_up-5.0.0.js" defer></script>
<script type="module" src="./ctrl.js"></script>
</html>
